<template>
  <el-dialog
    class="main-dialog"
    title=""
    :visible="showDialog"
    :width="width"
    :before-close="handleClose"
    :show-close="showClose"
    :close-on-click-modal="closeOnClickModal"
    >
    <div class="main-dialog-header">
      <p>{{ title }}</p>
      <span class="el-icon-close" @click="handleClose"></span>
    </div>
    <div class="main-dialog-content">
      <slot name="content"></slot>
    </div>
    <div class="main-dialog-footer">
      <slot name="footer"></slot>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    name: "MainDialog",
    props: {
      showDialog: {
        type: Boolean,
        default: false
      },
      width: {
        type: String,
        default: '30%'
      },
      title: {
        type: String
      },
      showClose: {
        type: Boolean,
        default: false
      },
      closeOnClickModal: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
      }
    },
    methods: {
      handleClose() {
        this.$emit('close')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .main-dialog {
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog__body {
      padding: 0;
    }
    .main-dialog-header {
      padding: 10px 30px;
      border-bottom: 1px solid rgba(0,0,0, .05);
      @include flex(space-between, center);
      p {
        color: #000000;
        font-size: $font_18;
      }
      .el-icon-close {
        font-size: 18px;
        cursor: pointer;
        font-weight: bold;
      }
    }
    .main-dialog-content {
      margin: 0 0 20px;
      padding: 30px;
      border-bottom: 1px solid rgba(0,0,0, .05);
    }
    .main-dialog-footer {
      padding: 0 30px 25px;
    }
  }
</style>